<template>
  <t-cascader
    class="area-cascader"
    :options="options"
    :clearable="true"
    :load="cascaderLoad"
    :keys="keys"
    :check-strictly="true"
  />
</template>

<script setup lang="ts">
import _ from 'lodash';
import { onMounted, ref, watch } from 'vue';

import { cascaderLoad, getRegionChildrenData } from '@/utils';

interface OptItem {
  name: string;
  code: string;
  has_children: string;
}

const props = defineProps({
  init: {
    type: Boolean,
    default: true,
  },
  list: {
    type: Array as any,
    default: () => {
      return [];
    },
  },
});

const emits = defineEmits(['load']);

const options = ref<OptItem[]>([]);
const keys = { label: 'name', value: 'code', children: 'has_children' };

watch(
  () => props.list,
  (arr) => {
    options.value = _.cloneDeep(arr);
  },
  { deep: true },
);

onMounted(async () => {
  if (props.init) {
    options.value = await getRegionChildrenData();
    emits('load', options.value);
  }
});
</script>

<style lang="less" scoped>
.area-cascader {
  width: 268px;

  :deep(.t-input__wrap) {
    width: 268px !important;
  }
}
</style>
